<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="￥ 126560">
            <template slot="charts">
              <span>周同比&nbsp;&nbsp;56.67%</span>
              <svg
                t="1653734647782"
                class="icon"
                viewBox="0 0 1317 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7340"
                width="12"
                height="8"
              >
                <path
                  d="M0 1024 1316.571429 1024 658.285714 0 0 1024Z"
                  p-id="7341"
                  fill="#8a8a8a"
                ></path>
              </svg>
              <span style="margin-left: 10px">日同比&nbsp;&nbsp;19.16%</span>
            </template>
            <template slot="footer">
              <span>日销售额￥&nbsp;&nbsp;12423</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="88460">
            <template slot="charts">
				<LineChart></LineChart>
            </template>
            <template slot="footer">
              <span>日访问量￥&nbsp;&nbsp;1234</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="88460">
            <template slot="charts">
              <BarChart></BarChart>
            </template>
            <template slot="footer">
              <span>转化率￥&nbsp;&nbsp;65%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="78%">
            <template slot="charts">
              <ProgressChart></ProgressChart></ProgressChart>
            </template>
            <template slot="footer">
              <span>周同比&nbsp;&nbsp;12%</span>
              <svg
                t="1653734647782"
                class="icon"
                viewBox="0 0 1317 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7340"
                width="12"
                height="8"
              >
                <path
                  d="M0 1024 1316.571429 1024 658.285714 0 0 1024Z"
                  p-id="7341"
                  fill="#8a8a8a"
                ></path>
              </svg>
              <span style="margin-left: 10px">日同比&nbsp;&nbsp;11%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail";
// 引入折线图组件
import LineChart from "./LineChart"
// 引入柱状图组件
import BarChart from "./BarChart"
import ProgressChart from "./ProgressChart"
export default {
  props: {},
  components: {
	Detail,
  LineChart,
  BarChart,
  ProgressChart
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less"></style>
